<template>
	<view>
		<u-navbar :background="background">
			<view class="slot-wrap">
				<u-search placeholder="搜索" bg-color='#fff' v-model="keyword" :show-action="false"></u-search>
				<u-icon class='u-p-30' name="shopping-cart" size='40'></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<u-dropdown class='dropdown' ref="uDropdown" border-bottom>
				<u-dropdown-item v-model="value1" title="价格" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="销量" :options="options2"></u-dropdown-item>
				<u-dropdown-item title="筛选">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 200rpx;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">无言独上西楼</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">月如钩</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">寂寞梧桐深院锁清秋</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">剪不断</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">理还乱</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">是离愁</view>
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">别是一般滋味在心头</view>
						</scroll-view>
						<u-button type="primary" @click="closeDropdown">确定</u-button>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<scroll-view scroll-y="true" :style="scrollStyle">
				<view class="list u-flex u-flex-wrap u-row-around u-p-20">
					<view class="list-item u-flex u-m-b-20" v-for="(item,index) in list" :key="index">
						<index-list-item :item="item" vertical :showSold='false' imageSize='180'></index-list-item>
					</view>
				</view>
				<u-divider color="#0eb6ff" bg-color="#F5F5F5" height='60' class='u-m-t-20'>推荐</u-divider>
				<view class="u-flex u-flex-wrap u-row-around u-p-20">
					<view class="list-item u-flex u-m-b-20" v-for="(item,index) in list" :key="index">
						<index-list-item :item="item" vertical :showSold='false' imageSize='180'></index-list-item>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/common/data/data.js'
	export default {
		computed:{
			scrollStyle(){
				const res = uni.getSystemInfoSync()
				// #ifdef H5
				const h = res.windowHeight - 44 - uni.upx2px(88)
				// #endif
				// #ifndef H5
				const h = res.windowHeight - 44 - uni.upx2px(88+60)
				// #endif
				return `height: ${h}px`
			}
		},
		data() {
			return {
				keyword: '',
				background: {
					backgroundColor: '#f5f5f5',
				},
				list: [],
				value1: '',
				value2: '',
				value3: '',
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '由低到高',
						value: 2,
					},
					{
						label: '由高到低',
						value: 3,
					}
				],
				options2: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '由低到高',
						value: 2,
					},
					{
						label: '由高到低',
						value: 3,
					}
				],
			}
		},
		onLoad(e) {
			console.log(e)
			this.keyword = e.search
			this.list = goodsList
		},
		methods: {
			closeDropdown() {
				this.$refs.uDropdown.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.list,
	.dropdown {
		background-color: #FFFFFF;
	}

	.list-item {
		width: 46%;
		box-shadow: 1rpx 1rpx 1rpx 5rpx #F5F5F5;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		// padding-right:30rpx;
	}
</style>
